<template>
  <el-card style="max-height:calc(100vh - 120px);padding-bottom:12px">
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="角色名称" prop="roleName">
        <el-input
          v-model="queryParams.roleName"
          placeholder="请输入角色名称"
          clearable
          size="small"
          style="width: 240px"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          >新增</el-button
        >
      </el-col>
      <right-toolbar
        class="right-toolbar"
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="roleList">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编号" prop="groupid" width="200" />
      <el-table-column
        label="名称"
        prop="groupname"
        :show-overflow-tooltip="true"
        width="200"
      />
      <el-table-column
        label="描述"
        prop="description"
        :show-overflow-tooltip="true"
        width="200"
      />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            :title="scope.row.data"
            @click="handleUpdate(scope.row)"
            >修改</el-button
          >
          <el-button size="mini" type="text" icon="el-icon-circle-check"
            >数据权限</el-button
          >
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>

      <el-dialog
        :title="title"
        :visible.sync="open"
        width="500px"
        append-to-body
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="角色名称" prop="groupname">
            <el-input v-model="form.groupname" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="菜单权限" class="treeClass">
            <!-- <el-checkbox
              v-model="deptNodeAll"
              @change="handleCheckedTreeNodeAll($event)"
              >全选/全不选</el-checkbox
            > -->
            <el-tree
              class="tree-border"
              :data="menuOptions"
              show-checkbox
              ref="menu"
              node-key="id"
              :check-strictly="true"
              :default-checked-keys="defaultChecked"
              empty-text="加载中，请稍后"
              :props="defaultProps"
            ></el-tree>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
              v-model="form.description"
              type="textarea"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updategroup">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </el-dialog>

      <el-dialog
        :title="title"
        :visible.sync="openAdd"
        width="500px"
        append-to-body
      >
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="编号" prop="groupid">
            <el-input v-model="form.groupid" placeholder="请输入唯一编号" />
          </el-form-item>
          <el-form-item label="角色名称" prop="groupname">
            <el-input v-model="form.groupname" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input
              v-model="form.description"
              type="textarea"
              placeholder="请输入内容"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addGroup">确 定</el-button>
          <el-button @click="openAdd = false">取 消</el-button>
        </div>
      </el-dialog>
    </el-table>
    <!-- <pagination
      class="pagination"
      :total="total"
      page.sync="20"
      limit.sync="10"
      @pagination="getList"
    /> -->
  </el-card>
</template>

<script>
import {
  getRoleGroupTree,
  getRoleGroup,
  updateRoleGroup,
  addRole,
  removeRole,
} from "@/api/rolegroup";
export default {
  data() {
    return {
      total: 100,
      // 弹出层标题
      title: "修改角色",
      // 是否新增-弹出层
      openAdd: false,
      // 是否显示弹出层
      open: false,
      // 是否显示弹出层（数据权限）
      showSearch: true,
      openDataScope: false,
      menuExpand: false,
      menuNodeAll: false,
      deptNodeAll: false,
      menuOptions: [],
      defaultProps: {
        children: "children",
        label: "label",
      },
      defaultChecked: undefined,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined,
      },
      // 日期范围
      dateRange: [],
      roleList: [
        {
          groupid: "g1",
          groupname: "超级管理员",
          description: "拥有系统最高权限",
        },
      ],
      formInline: {
        user: "",
        region: "",
      },
      form: {
        groupid: "",
        groupname: "",
        description: "",
        menuids: "",
      },
    };
  },
  methods: {
    onSubmit() {},
    // 获取列表
    getList() {
      this.loading = true;
      getRoleGroup().then((res) => {
        this.responseInterceptor(res);

        this.roleList = res.data.data.list;
        this.loading = false;
      });
    },
    handleAdd(row) {
      this.openAdd = true;
      this.form = {}
    },
    /** 新增权限组 */
    addGroup() {
      console.log(this.form);
      addRole(this.form).then((res) => {
        this.responseInterceptor(res);
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.openAdd = false;
          this.getList();
        }
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.open = true;
      // 设置表单元素
      this.form.groupid = row.groupid;
      this.form.groupname = row.groupname;
      this.form.description = row.description;
      this.getTree(row.groupid);
    },
    /** 得到树节点的权限组列表 */
    getTree(groupid) {
      getRoleGroupTree(groupid).then((res) => {
        this.responseInterceptor(res);
        this.responseInterceptor(res);

        this.menuOptions = res.data.data.allmenulist;

        // 禁止不选首页和控制台
        // this.menuOptions[0].disabled = true;
        // this.menuOptions[0].children[0].disabled = true;
        this.defaultChecked = res.data.data.checkmenulist.map((item) => {
          return item.menuid;
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(
        '是否确认删除角色编号为"' + row.groupid + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        removeRole(row.groupid)
          .then((res) => {
            this.responseInterceptor(res);
            if (res.data.code == 200) {
              this.$message.success(res.data.msg);
              this.openAdd = false;
              this.getList();
            }
          })
          .catch((err) => {
            this.$message.error("删除失败, 存在用户为该角色！");
          });
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.$message.warning("敬请期待");
    },
    /** 树权限（全选/全不选）*/

    handleCheckedTreeNodeAll(value) {
      value
        ? this.$refs.menu.setCheckedKeys(
            this.menuOptions
              .map((item) => {
                if (item.children.length > 0) {
                  let rs = [];
                  rs.push(item.id);
                  rs.push(item.children.map((subItem) => subItem.id));
                  return rs;
                }
                return item.id;
              })
              .flat(Infinity)
          )
        : this.$refs.menu.setCheckedKeys([]);
    },
    /** 更新权限组 */
    updategroup() {
      this.form.menuids = this.$refs.menu.getCheckedKeys().join(",");
      updateRoleGroup(this.form).then((res) => {
        this.responseInterceptor(res);

        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.open = false;
          this.getList();
        }
      });
    },
  },
  mounted() {
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
.treeClass {
  height: 200px;
  overflow-y: scroll;
}
</style>
